<template>
  <div class="listType">
    <mt-spinner class="spinner" type="fading-circle" v-show="isShow" color="#000"></mt-spinner>

    <mt-loadmore ref="loadmore" :top-method="refrash" :topDistance="30">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="el in arr" :key="el.id">

          <mt-cell :title="el.title" :to="'/detailAudio/' + dataType + '/' + el.id + '/0'" is-link :value="el.date"
            class="cell">
          </mt-cell>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  name: "listType",
  data() {
    return {
      arr: [],
      loading: false,
      isShow: false,

    };
  },
  props: {
    dataType: {
      type: String,
      value: "",
    },
  },
  methods: {
    refrash() {
      this.arr.length = 0;
      this.skip = 0;

      this.loadData();
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
        this.loading = false;
      }, 1000);
    },
    loadMore() {
      this.loading = true;
      this.loadData();
      this.loading = false;
    },
    loadData() {
      this.loading = true;
      this.isShow = true;
      const params = {
        dataType: this.dataType,
        start: this.arr.length,
        pageSize: 12,
      };

      this.$axios.get("getAudio", { params }).then((rs) => {
        if (rs.length === 0) {
          Toast("数据已经见底啦");
          this.isShow = false;
          return;
        }
        let temp = rs.map((el) => {
          let obj = {};
          obj.id = el.id;
          obj.title = el.title;
          obj.date = new Date(el.updatedAt).toLocaleDateString();
          return obj;
        });
        this.arr = [...this.arr, ...temp];
        this.loading = false;
        this.isShow = false;
      });

    },
  },
};
</script>
<style scoped lang="less">
div.listType {
  height: 100%;
  overflow: auto;

  .spinner {
    position: fixed;
    top: 300px;
    left: calc(50% - 20px);
    z-index: 100;
    width: 100px;
    height: 100px;
  }

  ul {
    margin: 0;
    padding: 0;
    text-align: center;

    li {
      background-color: #9d8c6f;

      p {
        font-size: 15px;
      }

      .cell {
        line-height: 40px;
        height: 40px;
        text-align: left;
      }
    }
  }
}
</style>
